<template>
  <div class="additional-service">
    <el-card>
      <el-tabs v-model="activeTab">
        <!-- 入库检查费 -->
        <el-tab-pane label="入库检查费" name="check">
          <div class="table-actions">
            <el-button type="primary" @click="openCheckDialog('add')">新增</el-button>
          </div>
          <el-table :data="checkFeeList" style="width: 100%">
            <el-table-column prop="type" label="检查类型" />
            <el-table-column prop="fee" label="收费金额（日元）" />
            <el-table-column prop="remark" label="备注" />
            <el-table-column label="操作" width="160">
              <template #default="scope">
                <div class="action-buttons">
                  <el-button size="small" @click="openCheckDialog('edit', scope.row, scope.$index)">编辑</el-button>
                  <el-button size="small" type="danger" @click="deleteCheckFee(scope.row, scope.$index)">删除</el-button>
                </div>
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>

        <!-- 拍照费 -->
        <el-tab-pane label="拍照费" name="photo">
          <div class="table-actions">
            <el-button type="primary" @click="openPhotoDialog('add')">新增</el-button>
          </div>
          <el-table :data="photoFeeList" style="width: 100%">
            <el-table-column prop="type" label="拍照类型" />
            <el-table-column prop="fee" label="收费金额（日元）" />
            <el-table-column prop="remark" label="备注" />
            <el-table-column label="操作" width="160">
              <template #default="scope">
                <div class="action-buttons">
                  <el-button size="small" @click="openPhotoDialog('edit', scope.row, scope.$index)">编辑</el-button>
                  <el-button size="small" type="danger" @click="deletePhotoFee(scope.row, scope.$index)">删除</el-button>
                </div>
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>

        <!-- 其他服务费 -->
        <el-tab-pane label="其他服务费" name="other">
          <div class="table-actions">
            <el-button type="primary" @click="openOtherDialog('add')">新增</el-button>
          </div>
          <el-table :data="otherFeeList" style="width: 100%">
            <el-table-column prop="name" label="服务名称" />
            <el-table-column prop="fee" label="收费金额（日元）" />
            <el-table-column prop="remark" label="备注" />
            <el-table-column label="操作" width="160">
              <template #default="scope">
                <div class="action-buttons">
                  <el-button size="small" @click="openOtherDialog('edit', scope.row, scope.$index)">编辑</el-button>
                  <el-button size="small" type="danger" @click="deleteOtherFee(scope.row, scope.$index)">删除</el-button>
                </div>
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>
      </el-tabs>

      <!-- 入库检查费弹窗 -->
      <el-dialog v-model="checkDialog.visible" :title="checkDialog.mode === 'add' ? '新增入库检查费' : '编辑入库检查费'" width="400px" :close-on-click-modal="false">
        <el-form :model="checkDialog.form" label-width="90px">
          <el-form-item label="检查类型">
            <el-input v-model="checkDialog.form.type" />
          </el-form-item>
          <el-form-item label="收费金额">
            <el-input-number v-model="checkDialog.form.fee" :min="0" />
          </el-form-item>
          <el-form-item label="备注">
            <el-input v-model="checkDialog.form.remark" />
          </el-form-item>
        </el-form>
        <template #footer>
          <el-button @click="checkDialog.visible = false">取消</el-button>
          <el-button type="primary" @click="saveCheckFee">保存</el-button>
        </template>
      </el-dialog>

      <!-- 拍照费弹窗 -->
      <el-dialog v-model="photoDialog.visible" :title="photoDialog.mode === 'add' ? '新增拍照费' : '编辑拍照费'" width="400px" :close-on-click-modal="false">
        <el-form :model="photoDialog.form" label-width="90px">
          <el-form-item label="拍照类型">
            <el-input v-model="photoDialog.form.type" />
          </el-form-item>
          <el-form-item label="收费金额">
            <el-input-number v-model="photoDialog.form.fee" :min="0" />
          </el-form-item>
          <el-form-item label="备注">
            <el-input v-model="photoDialog.form.remark" />
          </el-form-item>
        </el-form>
        <template #footer>
          <el-button @click="photoDialog.visible = false">取消</el-button>
          <el-button type="primary" @click="savePhotoFee">保存</el-button>
        </template>
      </el-dialog>

      <!-- 其他服务费弹窗 -->
      <el-dialog v-model="otherDialog.visible" :title="otherDialog.mode === 'add' ? '新增其他服务费' : '编辑其他服务费'" width="400px" :close-on-click-modal="false">
        <el-form :model="otherDialog.form" label-width="90px">
          <el-form-item label="服务名称">
            <el-input v-model="otherDialog.form.name" />
          </el-form-item>
          <el-form-item label="收费金额">
            <el-input-number v-model="otherDialog.form.fee" :min="0" />
          </el-form-item>
          <el-form-item label="备注">
            <el-input v-model="otherDialog.form.remark" />
          </el-form-item>
        </el-form>
        <template #footer>
          <el-button @click="otherDialog.visible = false">取消</el-button>
          <el-button type="primary" @click="saveOtherFee">保存</el-button>
        </template>
      </el-dialog>
    </el-card>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import type { CheckFee, PhotoFee, OtherFee } from '@/types/extraService'

// 当前激活的标签页
const activeTab = ref('check')

// 入库检查费 mock
const checkFeeList = ref<CheckFee[]>([
  { id: '1', type: '外观检查', fee: 100 },
  { id: '2', type: '功能检查', fee: 200, remark: '如需通电测试' }
])

// 拍照费 mock
const photoFeeList = ref<PhotoFee[]>([
  { id: '1', type: '基础拍照', fee: 50 },
  { id: '2', type: '细节拍照', fee: 100, remark: '多角度' },
  { id: '3', type: '视频', fee: 200 }
])

// 其他服务费 mock
const otherFeeList = ref<OtherFee[]>([
  { id: '1', name: '打包费', fee: 80 },
  { id: '2', name: '特殊处理费', fee: 150, remark: '易碎品' }
])

// 入库检查费 新增/编辑弹窗
const checkDialog = ref({ visible: false, mode: 'add', form: { type: '', fee: 0, remark: '' }, editIndex: -1 })

// 拍照费 新增/编辑弹窗
const photoDialog = ref({ visible: false, mode: 'add', form: { type: '', fee: 0, remark: '' }, editIndex: -1 })

// 其他服务费 新增/编辑弹窗
const otherDialog = ref({ visible: false, mode: 'add', form: { name: '', fee: 0, remark: '' }, editIndex: -1 })

// 入库检查费相关方法
function openCheckDialog(mode: 'add' | 'edit', row?: any, idx?: number) {
  checkDialog.value.mode = mode
  if (mode === 'add') {
    checkDialog.value.form = { type: '', fee: 0, remark: '' }
    checkDialog.value.editIndex = -1
  } else if (row && typeof idx === 'number') {
    checkDialog.value.form = { ...row }
    checkDialog.value.editIndex = idx
  }
  checkDialog.value.visible = true
}

function saveCheckFee() {
  const idx = checkDialog.value.editIndex
  if (checkDialog.value.mode === 'add') {
    checkFeeList.value.push({
      id: Date.now().toString(),
      type: checkDialog.value.form.type,
      fee: checkDialog.value.form.fee,
      remark: checkDialog.value.form.remark
    })
    ElMessage.success('新增成功')
  } else if (idx > -1) {
    checkFeeList.value[idx] = { ...checkDialog.value.form, id: checkFeeList.value[idx].id }
    ElMessage.success('编辑成功')
  }
  checkDialog.value.visible = false
  checkDialog.value.form = { type: '', fee: 0, remark: '' }
}

function deleteCheckFee(row: CheckFee, idx: number) {
  ElMessageBox.confirm(
    `确定要删除这条入库检查费设置吗？`,
    '确认删除',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    }
  ).then(() => {
    checkFeeList.value.splice(idx, 1)
    ElMessage.success('删除成功')
  })
}

// 拍照费相关方法
function openPhotoDialog(mode: 'add' | 'edit', row?: any, idx?: number) {
  photoDialog.value.mode = mode
  if (mode === 'add') {
    photoDialog.value.form = { type: '', fee: 0, remark: '' }
    photoDialog.value.editIndex = -1
  } else if (row && typeof idx === 'number') {
    photoDialog.value.form = { ...row }
    photoDialog.value.editIndex = idx
  }
  photoDialog.value.visible = true
}

function savePhotoFee() {
  const idx = photoDialog.value.editIndex
  if (photoDialog.value.mode === 'add') {
    photoFeeList.value.push({
      id: Date.now().toString(),
      type: photoDialog.value.form.type,
      fee: photoDialog.value.form.fee,
      remark: photoDialog.value.form.remark
    })
    ElMessage.success('新增成功')
  } else if (idx > -1) {
    photoFeeList.value[idx] = { ...photoDialog.value.form, id: photoFeeList.value[idx].id }
    ElMessage.success('编辑成功')
  }
  photoDialog.value.visible = false
  photoDialog.value.form = { type: '', fee: 0, remark: '' }
}

function deletePhotoFee(row: PhotoFee, idx: number) {
  ElMessageBox.confirm(
    `确定要删除这条拍照费设置吗？`,
    '确认删除',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    }
  ).then(() => {
    photoFeeList.value.splice(idx, 1)
    ElMessage.success('删除成功')
  })
}

// 其他服务费相关方法
function openOtherDialog(mode: 'add' | 'edit', row?: any, idx?: number) {
  otherDialog.value.mode = mode
  if (mode === 'add') {
    otherDialog.value.form = { name: '', fee: 0, remark: '' }
    otherDialog.value.editIndex = -1
  } else if (row && typeof idx === 'number') {
    otherDialog.value.form = { ...row }
    otherDialog.value.editIndex = idx
  }
  otherDialog.value.visible = true
}

function saveOtherFee() {
  const idx = otherDialog.value.editIndex
  if (otherDialog.value.mode === 'add') {
    otherFeeList.value.push({
      id: Date.now().toString(),
      name: otherDialog.value.form.name,
      fee: otherDialog.value.form.fee,
      remark: otherDialog.value.form.remark
    })
    ElMessage.success('新增成功')
  } else if (idx > -1) {
    otherFeeList.value[idx] = { ...otherDialog.value.form, id: otherFeeList.value[idx].id }
    ElMessage.success('编辑成功')
  }
  otherDialog.value.visible = false
  otherDialog.value.form = { name: '', fee: 0, remark: '' }
}

function deleteOtherFee(row: OtherFee, idx: number) {
  ElMessageBox.confirm(
    `确定要删除这条其他服务费设置吗？`,
    '确认删除',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    }
  ).then(() => {
    otherFeeList.value.splice(idx, 1)
    ElMessage.success('删除成功')
  })
}
</script>

<style scoped>
.additional-service {
  padding: 16px;
}

.table-actions {
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.action-buttons {
  display: flex;
  gap: 8px;
  align-items: center;
}
</style> 